<template>
  <el-container>
    <el-main>
      <div class="default-main ba-table-box">
        <TableHeader
          :buttons="['refresh', 'comSearch', 'columnDisplay']"
          :quick-search-placeholder="placeholder"
          @action="baTable.onTableHeaderAction"
        />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" @action="baTable.onTableAction" />
        <!-- 表单 -->
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject, provide } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi } from "@/utils/common"; // 导入表格api方法生成器
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { WarningItem } from "@/api/backend/index";
import { useRoute } from "vue-router";
import { useNavTabs } from "@/store/navTabs";
import { useWarningItem } from "@/store/backend/Warning/item";
import { useDictionary } from "@/store/backend/tool/dictionary";

const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const navTabs = useNavTabs();
const itemWarning = useWarningItem();
const dictionary = useDictionary();

const formRef = ref();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + WarningItem)
      ? (navTabs as any).pageSizeMap.get(route.path + WarningItem)
      : 10;
  }
  return 10;
};

//全局事件总线
const { proxy } = useCurrentInstance();
const baTable = new baTableClass(
  new baTableApi(WarningItem), //this.api = api菜单管理相关
  {
    pk: "itemId",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("itemName"),
        label: "告警指标项名称",
        prop: "itemName",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("ruleName"),
        label: "告警策略名称",
        prop: "ruleName",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("objectName"),
        label: "告警对象名称",
        prop: "objectName",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("grainSize"),
        label: "统计粒度",
        prop: "grainSize",
        align: "center",
        operatorPlaceholder: "精确搜索",
      },
      {
        show: filedShowOff("symbol"),
        label: "判定符号",
        prop: "symbol",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("value"),
        label: "蓝色告警值",
        prop: "value",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("value2"),
        label: "橙色告警值",
        prop: "value2",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("value3"),
        label: "红色告警值",
        prop: "value3",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("mqttFiled"),
        label: "MQTT字段名",
        prop: "mqttFiled",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("containNum"),
        label: "持续数量",
        prop: "containNum",
        align: "center",
        operator: false,
      },
      {
        show: filedShowOff("frequency"),
        label: "告警频率",
        prop: "frequency",
        align: "center",
        operator: false,
      },
      // {
      //   show: operatorShowOff([route.path + "/edit", route.path + "/remove"]),
      //   label: "操作",
      //   align: "center",
      //   width: "130",
      //   render: "buttons",
      //   fixed: "right",
      //   operator: false,
      //   buttons: [
      //     {
      //       render: "tipButton",
      //       name: "editWarnItem",
      //       title: "编辑",
      //       text: "",
      //       type: "primary",
      //       icon: "iconfont icon-pencil",
      //       class: "table-row-edit",
      //       disabledTip: false,
      //       // 按钮是否显示，请返回布尔值
      //       display: (row: TableRow, field: TableColumn) => {
      //         return true;
      //       },
      //       // 按钮是否禁用，请返回布尔值
      //       disabled: (row: TableRow, field: TableColumn) => {
      //         return false;
      //       },
      //       attr: {},
      //     },
      //     {
      //       render: "confirmButton",
      //       name: "removeWarnItem",
      //       title: "删除",
      //       text: "",
      //       type: "danger",
      //       icon: "el-icon-DeleteFilled",
      //       class: "table-row-delete",
      //       popconfirm: {
      //         confirmButtonText: "删除",
      //         cancelButtonText: "取消",
      //         confirmButtonType: "danger",
      //         title: "确定删除所选项吗",
      //       },
      //       disabledTip: false,
      //       // 按钮是否显示，请返回布尔值
      //       display: (row: TableRow, field: TableColumn) => {
      //         return true;
      //       },
      //       // 按钮是否禁用，请返回布尔值
      //       disabled: (row: TableRow, field: TableColumn) => {
      //         return false;
      //       },
      //       attr: {},
      //     },
      //   ],
      // },
    ],
    filter: {
      pageSize: pageSizeKeep(),
      ruleId: route.query.ruleId,
    },
    acceptQuery: false,
  },
  {
    // 默认表单数据(添加)
    defaultItems: {},
  },
  {}
);

onMounted(() => {
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(WarningItem);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {}
  );
});

// //获取字典
// const getDictionary = () => {
//   //获取判定符号的字典
//   dictOperation.getDictionary(
//     itemWarning,
//     "sys_warning_symbol",
//     "symbol",
//     "typeSymbol"
//   );
// };
// getDictionary();

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0;
}
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
</style>
